<template>
  <div class="myforum">
    <fan-hui></fan-hui>
    <div class="nrong"
         v-for="(item,index) in forums"
         :key="index">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="zuozhe">
        <div class="img">
          <img :src="item.head_img"
               alt="">
          <div class="name">
            {{ item.username }}
          </div>
        </div>
        <div class="time">
          发布时间：
          {{ item.publish_time }}
        </div>
      </div>
      <div class="content">
        {{ item.content }}
      </div>
    </div>
    <div class="review">
      <div class="pinglun">
        评&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;论
      </div>
      <div class="faping">
        <p>发表评论：</p>
        <el-input v-model="content"
                  style="width: 800px"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  placeholder="请输入内容" />
        <p class="but"
           @click="fabiao()">发表</p>
      </div>
      <!-- 评论列表 -->
      <div class="pinglist"
           v-for="item in reviews"
           :key="item.review_id">
        <div class="title">
          <div class="xinxi">
            <img :src="item.head_img"
                 alt="">
            <span class="name">{{ item.username }}</span>
            <span class="time">{{ item.review_time }}</span>
          </div>
          <p class="shanchu"
             v-if="item.username==username"
             @click="shanchu(item.review_id)">删除</p>
        </div>
        <div class="content">
          {{ item.review }}
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import axios from '@/axios'
import { ElMessage } from 'element-plus'
// import { ElLoading, ElMessage } from 'element-plus'
// import { useRouter } from 'vue-router'
import FanHui from '@/components/daohan/FanHui.vue'
export default {
  components: { FanHui },
  setup() {
    // const router = useRouter()
    // 论坛列表
    let forums = ref('')
    // 评论列表
    let reviews = ref('')
    //
    let username = localStorage.getItem('username')
    // 弹窗
    let centerDialogVisible = ref(false)
    //判断是否为空
    let kong = ref('')
    //要删除的评论id
    let review_id = ref('')
    //评论内容
    let content = ref('')

    //删除评论
    let shanchu = (id) => {
      axios
        .post('/plshan', { id: id })
        .then(() => {
          ElMessage({
            message: '评论删除成功',
            type: 'success'
          })
          //获取评论列表
          axios
            .get('/reviews', { forum_id: localStorage.getItem('forum_id') })
            .then((d) => {
              reviews.value = d
            })
            .catch((err) => console.log(err))
        })
        .catch((err) => console.log(err))
    }
    //发表评论
    let fabiao = () => {
      axios
        .post('/pinglun', {
          username: localStorage.getItem('username'),
          forum_id: localStorage.getItem('forum_id'),
          content: content.value
        })
        .then(() => {
          axios
            .get('/reviews', { forum_id: localStorage.getItem('forum_id') })
            .then((d) => {
              //过滤数据
              reviews.value = d
            })
            .catch((err) => console.log(err))
          ElMessage({
            message: '评论发表成功',
            type: 'success'
          })
          content.value = ''
        })
        .catch((err) => console.log(err))
    }

    onMounted(() => {
      //获取我的论坛列表
      axios
        .get('/forums')
        .then((d) => {
          //过滤数据
          forums.value = d.filter((item) => {
            return item.forum_id == localStorage.getItem('forum_id')
          })
        })
        .catch((err) => console.log(err))
      //获取评论列表
      axios
        .get('/reviews', { forum_id: localStorage.getItem('forum_id') })
        .then((d) => {
          //过滤数据
          reviews.value = d
        })
        .catch((err) => console.log(err))
    })

    return {
      forums,
      centerDialogVisible,
      kong,
      fabiao,
      review_id,
      content,
      reviews,
      username,
      shanchu
    }
  }
}
</script>

<style scoped lang="less">
.myforum {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 30px 0 50px;
  .nrong {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
    border-bottom: #cdbf62 2px solid;
    line-height: 1.5;
    .title {
      width: 100%;
      padding: 15px 20px;
      font-size: 20px;
      font-weight: 600;
      color: #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .zuozhe {
      width: 100%;
      height: 45px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: #cdbf62 2px dashed;
      .img {
        width: 500px;
        height: 45px;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .name {
          font-size: 18px;
          color: #666;
        }
      }
    }
    .content {
      width: 100%;
      font-size: 16px;
      background-color: #fcfcfa;
      padding: 20px;

      text-indent: 2em;
    }
  }
  .review {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
    line-height: 1.5;
    .pinglun {
      width: 100%;
      height: 40px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      line-height: 40px;
      color: #f7a50e;
      border-radius: 15px;
      background-color: #fcfcfa;
      border-bottom: #cdbf62 2px solid;
      border-left: #cdbf62 2px dashed;
      border-right: #cdbf62 2px dashed;
      border-top: #cdbf62 2px solid;
    }
    .faping {
      display: flex;
      position: relative;
      width: 100%;
      padding: 20px;

      border-bottom: #cdbf62 2px dashed;
      .but {
        width: 60px;
        position: absolute;
        bottom: 10px;
        right: 25px;
        height: 30px;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        line-height: 30px;
        color: #f7a50e;
        border-radius: 15px;
        background-color: #fcfcfa;
        border: #cdbf62 2px solid;
        cursor: pointer;
      }
    }
    .pinglist {
      width: 100%;
      border-bottom: #cdbf62 1px dashed;
      .title {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        .xinxi {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          .name {
            margin: 0 20px 0 5px;
          }
        }
        .shanchu {
          color: #666;
          padding: 0 10px;
          cursor: pointer;
        }
      }
      .content {
        text-indent: 2rem;
        padding: 0 20px 20px;
      }
    }
  }
}
</style>

